<template>
  <div style="width: 100%;height: calc(100vh - 120px)" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/components/Mixins/resize'
import {
  listProduct
} from '@/api/iot/iotProductApi'
import {
  getSeriesList
} from '@/api/iot/iotProductSeriesApi'
import { getUserId } from '@/util/storage'
export default {
  name: 'ProductAnalysis',
  mixins: [resize],
  data() {
    return {
      productList: [],
      chartData: {},
      userId: getUserId()
    }
  },
  mounted() {
    this.getProductList()
  },
  methods: {
    getAllSeries() {
      this.chartData = {
        'name': '',
        'children': []
      }
      this.productList.forEach(product => {
        getSeriesList({
          productId: product.productId
        }).then(res => {
          const { code, data } = res
          if (code === '200') {
            const seriesData = {
              'name': product.name,
              'children': []
            }
            const seriesList = data
            seriesList.forEach(series => {
              seriesData['children'].push({
                'name': series.name
              })
            })
            this.chartData['children'].push(seriesData)
            this.initChart()
          }
        })
      })
    },
    getProductList() {
      listProduct({
        userId: this.userId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.productList = data
          this.getAllSeries()
        }
      })
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        series: [
          {
            type: 'tree',
            name: this.$t('param'),
            data: [this.chartData],
            top: '10%',
            bottom: '10%',
            symbolSize: 3,
            initialTreeDepth: 4,
            layout: 'radial',
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      })
    }
  }
}
</script>
